<template>
  <div class="page-container">
    <el-row :gutter="24" v-if="service.cpuMonitor">
      <el-col :md="6" :sm="12">
        <el-card class="cpu-card" shadow="never">
          <div class="text-number">{{ service.cpuMonitor ? service.cpuMonitor.coreNum : 0 }}</div>
            <div class="title-text">CPU核心数</div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card class="cpu-card" shadow="never">
          <div class="text-number" :class="getClass(service.cpuMonitor.systemUseRate)">
            {{ service.cpuMonitor ? service.cpuMonitor.systemUseRate : 0 }}%
          </div>
          <div class="title-text">
            系统CPU使用率
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card class="cpu-card" shadow="never">
          <div class="text-number" :class="getClass(service.cpuMonitor.userUseRate)">
            {{ service.cpuMonitor ? service.cpuMonitor.userUseRate : 0 }}%
          </div>
          <div class="title-text">
            用户CPU使用率
          </div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card class="cpu-card" shadow="never">
          <div class="text-number" :class="getFreeClass(service.cpuMonitor.freeRate)">
            {{ service.cpuMonitor ? service.cpuMonitor.freeRate : 0 }}%
          </div>
          <div class="title-text">
            当前CPU空闲率
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 内存监控 -->
    <el-card style="margin-bottom: 20px;" shadow="never">
      <div class="header">
        <i class="el-icon-tickets"></i>
        <span>内存监控</span>
      </div>
      <el-row>
        <el-col :md="12" :sm="24" v-if="service.memoryMonitor">
          <div class="board-item">
            <div class="memory-title">服务器内存</div>
            <div class="memory-body">
              <em>服务器内存使用率</em>
              <div class="process">
                <el-progress type="dashboard" :stroke-width="12" :width="240" :percentage="service.memoryMonitor.usage" :color="colors"></el-progress>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="memory-other">
              <el-row :gutter="24">
                <el-col :span="12">
                  总内存<br />
                  <em class="memory-other-color01">{{ service.memoryMonitor.total }}G</em>
                </el-col>
                <el-col :span="12">
                  可用大小<br />
                  <em class="memory-other-color02">{{ service.memoryMonitor.free }}G</em>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :md="12" :sm="24" v-if="service.jvmMonitor">
          <div class="board-item">
            <div class="memory-title">JVM内存</div>
            <div class="memory-body">
              <em>JVM内存使用率</em>
              <div class="process">
                <el-progress type="dashboard" :stroke-width="12" :width="240" :percentage="service.jvmMonitor.usage" :color="colors"></el-progress>
              </div>
            </div>
            <el-divider></el-divider>
            <div class="memory-other">
              <el-row :gutter="24">
                <el-col :span="12">
                  总内存<br />
                  <em class="memory-other-color01">{{ service.jvmMonitor.totalMemory }}MB</em>
                </el-col>
                <el-col :span="12">
                  可用大小<br />
                  <em class="memory-other-color02">{{ service.jvmMonitor.freeMemory }}MB</em>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 磁盘状态 -->
    <el-row style="margin-bottom: 20px;">
      <div class="card">
        <div class="header">
          <i class="el-icon-receiving"></i>
          <span>磁盘状态</span>
        </div>
        <el-row>
          <el-col :lg="6" :md="8" :sm="12" :xs="24" v-for="(disk, index) in service.diskMonitors" :key="index" class="board-item">
            <div class="disk-list-ul">
              <div class="disk-caption-text">
                <div class="disk-caption-name">
                  <span>{{ disk.diskName }}</span>
                  <el-button type="text" size="mini" icon="el-icon-document" @click="$refs.viewDrawer.handleView(disk)">详细</el-button>
                </div>
                <div class="disk-caption-type">
                  <span class="disk-caption-text-header">磁盘类型：</span>
                  <em class="disk-caption-text-content">{{ disk.diskType }}</em>
                </div>
                <div class="disk-caption-path">
                  <span class="disk-caption-text-header">磁盘路径：</span>
                  <em class="disk-caption-text-content">{{ disk.diskPath }}</em>
                </div>
              </div>
              <div class="process">
                <el-progress type="circle" :percentage="disk.usage" :color="colors"></el-progress>
              </div>
              <div class="disk-other">
                <el-row :gutter="24">
                  <el-col :span="12">
                    总大小<br />
                    <em class="disk-other-color01">{{ disk.total }}</em>
                  </el-col>
                  <el-col :span="12">
                    可用大小<br />
                    <em class="disk-other-color02">{{ disk.free }}</em>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>

    <!-- 服务器信息 -->
    <el-row style="margin-bottom: 20px;">
      <el-col :span="24">
        <div class="card">
          <div class="header">
            <i class="el-icon-monitor"></i>
            <span>服务器信息</span>
          </div>
          <el-divider></el-divider>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">服务器名称</div></th>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.serverMonitor">
                      {{ service.serverMonitor.serverName }}
                    </div>
                  </td>
                  <th class="el-table__cell is-leaf"><div class="cell">操作系统</div></th>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.serverMonitor">
                      {{ service.serverMonitor.os }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">服务器IP</div></th>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.serverMonitor">
                      {{ service.serverMonitor.serverIp }}
                    </div>
                  </td>
                  <th class="el-table__cell is-leaf"><div class="cell">系统架构</div></th>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.serverMonitor">
                      {{ service.serverMonitor.osArch }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- Java虚拟机信息 -->
    <el-row style="margin-bottom: 20px;">
      <el-col :span="24">
        <div class="card">
          <div class="header">
            <i class="el-icon-coffee-cup"></i>
            <span>Java虚拟机信息</span>
          </div>
          <el-divider></el-divider>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;table-layout:fixed;">
              <tbody>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">Java名称</div></th>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.jvmMonitor">
                      {{ service.jvmMonitor.name }}
                    </div>
                  </td>
                  <th class="el-table__cell is-leaf"><div class="cell">Java版本</div></th>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.jvmMonitor">
                      {{ service.jvmMonitor.version }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <th class="el-table__cell is-leaf"><div class="cell">启动时间</div></th>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.jvmMonitor">
                      {{ service.jvmMonitor.jdkStartTime }}
                    </div>
                  </td>
                  <th class="el-table__cell is-leaf"><div class="cell">运行时长</div></th>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.jvmMonitor">
                      {{ service.jvmMonitor.jdkRunTime }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <th colspan="1" class="el-table__cell is-leaf"><div class="cell">安装路径</div></th>
                  <td colspan="3" class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.jvmMonitor">
                      {{ service.jvmMonitor.home }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <th colspan="1" class="el-table__cell is-leaf"><div class="cell">项目路径</div></th>
                  <td colspan="3" class="el-table__cell is-leaf">
                    <div class="cell" v-if="service.serverMonitor">
                      {{ service.serverMonitor.projectPath }}
                    </div>
                  </td>
                </tr>
                <tr>
                  <th colspan="1" class="el-table__cell is-leaf"><div class="cell">运行参数</div></th>
                  <td colspan="3" class="el-table__cell is-leaf">
                    <div class="cell"  v-if="service.jvmMonitor">
                      {{ service.jvmMonitor.inputArgs }}
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 详细数据抽屉 -->
    <view-drawer ref="viewDrawer" />
  </div>
</template>

<script>
import ViewDrawer from './components/ViewDrawer.vue'
import { getMonitorInfo } from '../../../api/monitor/server'

export default {
  name: 'Server',

  data () {
    return {
      // 服务器信息
      service: [],
      // 磁盘状态颜色
      colors: [
        // 绿色，10%以下
        { color: '#5cb87a', percentage: 10 },
        // 蓝色，11%到60%
        { color: '#1989fa', percentage: 60 },
        // 黄色，61%到80%
        { color: '#e6a23c', percentage: 80 },
        // 红色，80%到100%
        { color: '#f56c6c', percentage: 100 }
      ]
    }
  },

  components: { ViewDrawer },

  created () {
    // 打开加载框
    this.getServerInfo(0)
  },

  beforeDestroy () {
    clearInterval(this.timer)
  },

  mounted () {
    this.timer = setInterval(() => {
      this.getServerInfo(1)
    }, 10000)
  },

  methods: {
    // 打开数据加载框
    getServerInfo (type) {
      let loading
      if (type === 0) {
        loading = this.$loading({
          lock: true,
          text: '正在加载服务监控数据...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.9)'
        })
      }
      // 获取后台数据
      getMonitorInfo().then((res) => {
        this.service = res
        setTimeout(() => {
          if (type === 0) {
            loading.close()
          }
        }, 500)
      })
    },
    // 获取使用率文字样式
    getClass (value) {
      if (value <= 10) {
        return 'text-success'
      } else if (value > 60 && value <= 80) {
        return 'text-warning'
      } else if (value > 80) {
        return 'text-danger'
      }
    },
    // 获取空闲率文字样式
    getFreeClass (value) {
      if (value <= 10) {
        return 'text-danger'
      } else if (value > 10 && value <= 20) {
        return 'text-warning'
      } else if (value > 80) {
        return 'text-success'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-divider {
  margin: 8px 0;
  width: 100%;
}

.header {
  margin-bottom: 20px;

  span {
    margin-left: 10px;
  }
}
.cpu-card {
  text-align: center;
  margin-bottom: 20px;
}
.text-danger {
  color: red;
}
.text-success {
  color: #67C23A;
}
.text-warning {
  color: #E6A23C;
}
.text-number {
  font-size: 42px;
  margin-bottom: 0.5rem;
}
.title-text {
  font-size: 12px;
  margin: 0;
  padding: 0;
  color: #666666;
}
.disk-caption-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  em {
    font-size: 13px;
    color: #858585;
    font-style: normal;
    font-weight: normal;
  }
  .disk-caption-text-header {
    display: inline-block;
    width: 65px;
    font-size: 13px;
    font-weight: 430;
    color: #363636;
  }

  .disk-caption-text-content {
    display: inline-block;
    width: calc(100% - 65px);
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden;    /* 隐藏溢出部分的文本 */
    text-overflow: ellipsis; /* 显示省略号 */
  }

  .disk-caption-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: center;
  }

  .disk-caption-type {
    display: flex;
    align-items: center;
    margin-top: 0.4rem;
  }

  .disk-caption-path {
    display: flex;
    align-items: center;
    width: 100%;
  }
}
.disk-list-ul {
  padding: 10px 20px 10px 15px;
  margin-bottom: 15px;
}
.board-item {
  padding: 24px;
  border: 1px solid #dcdfe6;
  transition: all 0.3s;
  &:hover {
    box-shadow: darkgrey 1px 1px 3px 1px;
  }
}
.disk-other {
  font-size: 12px;
  color: #666666;
  line-height: 20px;
  text-align: center;
}
.disk-other em {
  font-style: normal;
  font-size: 22px;
  margin-top: 10px;
  display: inline-block;
}
.disk-other em.disk-other-color01 {
  color: #2496ff;
}
.disk-other em.disk-other-color02 {
  color: #3f8652;
}
.memory-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 1rem;
}
.memory-body em {
  font-size: 14px;
  font-weight: 500;
  color: #858585;
  font-style: normal;
  font-weight: normal;
}
.process {
  margin: 0.5rem 0;
  text-align: center;
}
.memory-other {
  padding-top: 0.625rem;
  font-size: 14px;
  color: #666666;
  line-height: 24px;
  text-align: center;
}
.memory-other em {
  font-style: normal;
  font-size: 30px;
  margin-top: 10px;
  display: inline-block;
}
.memory-other em.memory-other-color01 {
  color: #2496ff;
}
.memory-other em.memory-other-color02 {
  color: #3f8652;
}
</style>
